<template>
	<view class="search-container">
		<view class="search-header">
			<view class="search-box">
				<text class="iconfont icon-search"></text>
				<input 
					type="text" 
					v-model="keyword" 
					placeholder="搜索食物" 
					confirm-type="search"
					@confirm="searchFood"
					class="search-input"
					focus
				/>
				<text class="search-btn" @tap="searchFood">搜索</text>
			</view>
		</view>
		
		<view class="search-content">
			<view class="search-info" v-if="keyword">
				<text>关键词: {{keyword}}</text>
				<text>找到 {{total}} 条结果</text>
			</view>
			
			<!-- 搜索结果列表 -->
			<view class="food-list" v-if="foodList.length > 0">
				<view 
					class="food-item" 
					v-for="(item, index) in foodList" 
					:key="index"
					@tap="viewFoodDetail(item)"
				>
					<image :src="item.image || '/static/images/placeholder.png'" mode="aspectFill" class="food-image"></image>
					<view class="food-info">
						<view class="food-name">{{item.name}}</view>
						<view class="food-nutrition">
							<text class="nutrition-item">{{item.calories}}kcal/{{item.unit}}</text>
						</view>
						<view class="food-nutrition">
							<text class="nutrition-item">碳水{{item.carbs}}g</text>
							<text class="nutrition-item">蛋白质{{item.protein}}g</text>
							<text class="nutrition-item">脂肪{{item.fat}}g</text>
						</view>
					</view>
					<view class="food-action">
						<view class="add-btn" @tap.stop="addFood(item)">
							<text class="iconfont icon-add"></text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 空状态 -->
			<view class="empty-state" v-else-if="hasSearched">
				<image src="/static/images/placeholder.png" mode="aspectFit" class="empty-image"></image>
				<view class="empty-text">未找到相关食物</view>
				<view class="empty-tips">请尝试其他关键词搜索</view>
			</view>
			
			<!-- 加载更多 -->
			<view class="load-more" v-if="hasMore && foodList.length > 0">
				<text @tap="loadMore">加载更多</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	import { searchFood as searchFoodApi } from '@/common/api/diet.js'
	
	// 搜索关键词
	const keyword = ref('')
	// 食物列表
	const foodList = ref([])
	// 总数
	const total = ref(0)
	// 是否有更多
	const hasMore = ref(false)
	// 是否已经搜索过
	const hasSearched = ref(false)
	// 页码
	const page = ref(1)
	// 每页数量
	const pageSize = ref(10)
	
	// 获取URL参数
	onMounted(() => {
		const query = uni.getSystemInfoSync().platform === 'mp-weixin' ? 
			getCurrentPages()[getCurrentPages().length - 1].options : 
			uni.getLaunchOptionsSync().query
		
		if (query && query.keyword) {
			keyword.value = decodeURIComponent(query.keyword)
			searchFood()
		}
	})
	
	// 搜索食物
	const searchFood = async () => {
		if (!keyword.value.trim()) {
			uni.showToast({
				title: '请输入搜索关键词',
				icon: 'none'
			})
			return
		}
		
		try {
			// 重置页码
			page.value = 1
			hasSearched.value = true
			
			uni.showLoading({
				title: '搜索中...'
			})
			
			const res = await searchFoodApi({
				keyword: keyword.value.trim(),
				page: page.value,
				pageSize: pageSize.value
			})
			
			if (res.code === 0) {
				foodList.value = res.data.list
				total.value = res.data.total
				hasMore.value = res.data.list.length < res.data.total
			} else {
				uni.showToast({
					title: res.message || '搜索失败',
					icon: 'none'
				})
			}
		} catch (e) {
			console.error('搜索食物失败:', e)
			uni.showToast({
				title: '搜索失败',
				icon: 'none'
			})
		} finally {
			uni.hideLoading()
		}
	}
	
	// 加载更多
	const loadMore = async () => {
		if (!hasMore.value) return
		
		try {
			page.value++
			
			uni.showLoading({
				title: '加载中...'
			})
			
			const res = await searchFoodApi({
				keyword: keyword.value.trim(),
				page: page.value,
				pageSize: pageSize.value
			})
			
			if (res.code === 0) {
				foodList.value = [...foodList.value, ...res.data.list]
				hasMore.value = foodList.value.length < res.data.total
			} else {
				uni.showToast({
					title: res.message || '加载失败',
					icon: 'none'
				})
			}
		} catch (e) {
			console.error('加载更多失败:', e)
			uni.showToast({
				title: '加载失败',
				icon: 'none'
			})
		} finally {
			uni.hideLoading()
		}
	}
	
	// 查看食物详情
	const viewFoodDetail = (food) => {
		uni.navigateTo({
			url: `/pages/diet/food-detail?id=${food.id}`
		})
	}
	
	// 添加食物
	const addFood = (food) => {
		uni.navigateTo({
			url: `/pages/diet/add?foodId=${food.id}&foodName=${encodeURIComponent(food.name)}`
		})
	}
</script>

<style lang="scss">
	.search-container {
		min-height: 100vh;
		background-color: #f5f7fa;
		
		.search-header {
			background-color: #fff;
			padding: 20rpx;
			position: sticky;
			top: 0;
			z-index: 100;
			
			.search-box {
				display: flex;
				align-items: center;
				background-color: #f5f5f5;
				border-radius: 30rpx;
				padding: 15rpx 20rpx;
				
				.icon-search {
					font-size: 32rpx;
					color: #999;
					margin-right: 10rpx;
				}
				
				.search-input {
					flex: 1;
					height: 60rpx;
					font-size: 28rpx;
				}
				
				.search-btn {
					font-size: 28rpx;
					color: #8cc9a1;
					padding: 0 10rpx;
				}
			}
		}
		
		.search-content {
			padding: 20rpx;
			
			.search-info {
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				color: #999;
				margin-bottom: 20rpx;
			}
			
			.food-list {
				.food-item {
					display: flex;
					background-color: #fff;
					border-radius: 12rpx;
					padding: 20rpx;
					margin-bottom: 20rpx;
					
					.food-image {
						width: 120rpx;
						height: 120rpx;
						border-radius: 8rpx;
						margin-right: 20rpx;
						background-color: #f9f9f9;
					}
					
					.food-info {
						flex: 1;
						
						.food-name {
							font-size: 28rpx;
							font-weight: bold;
							color: #333;
							margin-bottom: 10rpx;
						}
						
						.food-nutrition {
							display: flex;
							margin-bottom: 5rpx;
							
							.nutrition-item {
								font-size: 24rpx;
								color: #666;
								margin-right: 15rpx;
								
								&:last-child {
									margin-right: 0;
								}
							}
						}
					}
					
					.food-action {
						display: flex;
						align-items: center;
						
						.add-btn {
							width: 60rpx;
							height: 60rpx;
							background-color: #8cc9a1;
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
							color: #fff;
							font-size: 32rpx;
						}
					}
				}
			}
			
			.empty-state {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 100rpx 0;
				
				.empty-image {
					width: 200rpx;
					height: 200rpx;
					margin-bottom: 30rpx;
				}
				
				.empty-text {
					font-size: 32rpx;
					color: #333;
					margin-bottom: 10rpx;
				}
				
				.empty-tips {
					font-size: 24rpx;
					color: #999;
				}
			}
			
			.load-more {
				text-align: center;
				padding: 20rpx 0;
				font-size: 24rpx;
				color: #8cc9a1;
			}
		}
	}
</style> 